@import "base";

$fsz:50;
$p1Color:#333;
$p2Color:#666;
$p3Color:#999;
@mixin center{margin:0 auto;width:rem(750);}
@mixin tac{text-align: center}
@function rem($value){
     @return $value/$fsz*1rem; 
}

.banner{@include center;img{width: rem(750);height: rem(350);}}

.fontSiz{
    @include center;@include tac;p{line-height: 1;font-size:rem(26);}
    .p1{color:$p1Color; margin-top: rem(70);font-size:rem(30);}.p2{color:$p2Color;margin-top: rem(40);}.p3{color:$p3Color;margin-top: rem(68);}.p4{color:$p3Color;margin-top: rem(40);margin-bottom:rem(70);}
}

.tab{
    @include center;
    i.solid{width:rem(670);height:1px;display:block;background-color:#e9e9e9;margin:0 auto;margin-bottom:rem(50);}
    ul.title{
        li{
            float:left;line-height: rem(50);cursor:pointer;color:$p1Color;position:relative;
            text-align: center;
            width: 50%;
            i{position:absolute;width:rem(128);height:rem(4);left:50%;transform:translateX(-50%);background-color:$p1Color;}
            // 状态切换 i
            i.curli2{display:none;}
            i.curli1{display:none;}
            

        }
    }
// curlicontent切换
    div.contentLi2{display:none;}
    div.contentLi1{display:none;}

    .content-li1,.content-li2{
            padding:0 rem(50);margin-top: rem(30);
            li{
                float:left;margin-bottom:rem(40);
               .shadow{
                    background-color: rgb(255, 255, 255);
                    box-shadow: 0px 8px 26px 0px rgba(212, 212, 212, 0.196);
                    width: rem(300);
                    height: rem(530);
                    z-index: 13;
                    img{height:rem(450);width:100%;}
                    p{text-align: center;line-height: rem(80);color:$p3Color;}
               }
            }
            li:nth-of-type(2n){margin-left:rem(50);}
    }
}




